<template>
  <div>
    <!-- v-on 也可以写作 @  用于绑定事件 -->
    <div v-on:click="fun">123123</div>
    <div @click="fun1(123123, $event)">3333</div>

    <ul>
      <li v-for="item in arr" :key="item.id">
        <span> {{ item.name }} </span> <span> {{ item.age }} </span>
        <button @click.prevent.right="fun(item.id)">查看id</button>
      </li>
    </ul>
    <p>{{title}}</p>

    <!-- .stop 阻止事件冒泡  比如 v-on:click.stop="xx"
    .prevent 阻止事件的默认行为
    .once 只执行一次时间
    .left   点击鼠标左键出发
    .right  点击鼠标右键触发
    .middle 点击鼠标中间触发
    .native 监听组件的根元素的原生事件 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          id: "001",
          name: "张三",
          age: "22",
        },
        {
          id: "002",
          name: "李四",
          age: "23",
        },
        {
          id: "003",
          name: "王五",
          age: "19",
        },
        {
          id: "004",
          name: "周六",
          age: "20",
        },
      ],
      title: "我是title",
    };
  },
  methods: {
    fun: function (id) {
      console.log(id);
      this.seeID2()   //调用其他函数
    },
    fun1(v, e) {
      console.log("function可以省略", v);
      console.log("function可以省略", e);
      //当前面没有传参时输出的 v 为事件对象 接收到实参会把事件对象覆盖掉改为实参
    },
    seeID2: function () {
      //这里的this 代表vue实例对象 this === vue
      // data 中定义的变量 我们也叫他响应式变量
      this.title = "我是修改的"; //修改data中定义的变量
      console.log(this.title); //获取data中定义的变量

    //   this.fun1(); //调用其他函数
    },
  },
};
</script>

<style>
</style>